<template>

  <el-row :gutter="20" class="row">
    <el-col :span="16" class="mainContent">
      <div class="grid-content">
        <p>
          肉桂，中等大乔木；树皮灰褐色，老树皮厚达3毫米。一年生枝条圆柱形，黑褐色，有纵向细条纹，略被短柔毛，当年生枝条多少四棱形，黄褐色，具纵向细条纹，密被灰黄色短绒毛。
        </p>
        <p>顶芽小，长约3毫米，芽鳞宽卵形，先端渐尖，密被灰黄色短绒毛。</p>
        <p>
          叶互生或近对生，长椭圆形至近披针形，长8-16厘米，宽4-5.5厘米，先端稍急尖，基部隐尖，革质，边缘软骨质，内卷，上面绿色，有光泽，无毛，下面淡绿色，晦暗，疏被黄色短绒毛，离基三出脉，侧脉近对生，自叶基5-10毫米处生出，稍弯向上伸至叶端之下方渐消失，与中脉在上面明显凹陷，下面十分凸起，向叶缘一侧有多数支脉，支脉在叶缘之内拱形连结，横脉波状，近平行，相距3-4毫米，上面不明显，下面凸起，其间由小脉连接，小脉在下面明显可见；叶柄粗壮，长1.2-2厘米，腹面平坦或下部略具槽，被黄色短绒毛。
        </p>
        <p>
          圆锥花序腋生或近顶生，长8-16厘米，三级分枝，分枝末端为3花的聚伞花序，总梗长约为花序长之半，与各级序轴被黄色绒毛。花白色，长约4.5毫米，花梗长3-6毫米，被黄褐色短绒毛。花被内外两面密被黄褐色短绒毛，花被筒倒锥形，长约2毫米花被裂片，卵状长圆形，近等大，长约25毫米，宽1.5毫米，先端钝或近锐尖。能育雄蕊9，花丝被柔毛，第一、二轮雄蕊长约
          2.3毫米，花丝扁平，长约1.4毫米，上方1/3处变宽大，花药卵圆状长圆形，长约0.9毫米，先端截平，药室4，室均内向，上2室小得多，第三轮雄蕊长约2.7毫米，花丝扁平，长约1.9毫米，上方13处有一对圆状肾形腺体，花药卵圆状长圆形，药室4，上2室较小，外侧向，下2室较大，外向。退化雄蕊3，位于最内轮，连柄长约2毫米，柄纤细，扁平，长1.3毫米，被柔毛，先端箭头状正三角形。子房卵球形，长约17毫米，无毛，花柱纤细，与子房等长，柱头小，不明显。
        </p>
        <p>
          果贿圆形，长约1厘米，宽7-8毫米，成熟时黑紫色，无毛；果托浅杯状，长4毫米，顶端宽达7毫米，边缘截平或略具齿裂。花期6-8月，果期10-12月。
        </p>
        <template>
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item">
              <img v-if="item == 1" src="../images/pic1.jpg">
              <img v-if="item == 2" src="../images/pic2.png">
              <img v-if="item == 3" src="../images/pic3.webp">
              <img v-if="item == 4" src="../images/pic4.webp">
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>
    </el-col>

    <el-col :span="7">
      <div class="grid-content bg-purple">
        <!-- <el-skeleton
            style="width: 400px"
            :loading="loading"
            animated
            :count="3"
          > -->
        <template>
          <el-card
            :body-style="{
              padding: '0px',
              marginBottom: '1px',
            }"
          >
            <div class="sideContent">
              <a href="https://baike.baidu.com/pic/%E8%82%89%E6%A1%82/769415/1">
                <img src="../images/rougui.webp" class="image multi-content">
                <div style="padding: 14px" class="describe">
                  <span> 肉桂图片 </span>
                </div>
              </a>
            </div>
          </el-card>
        </template>
        <!-- </el-skeleton> -->
      </div>
    </el-col>
  </el-row>

</template>

<script>
export default {
  name: 'Form'
}
</script>

<style lang="scss">
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}
.el-card,
.bg-purple {
  width: 100%;
}
.is-always-shadow {
  margin-right: 10px;
}
.image {
  width: 100%;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin: 15px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
p {
  font-size: 15px;
  line-height: 1.7;
  text-indent: 2em;
}
.el-carousel__item img {
  background-position: 30px;
  width: 100%;
}
.el-carousel,
.el-carousel__container {
  height: 350px;
}

.describe {
  font-size: 14px;
  background-color: #f5f7fa;
  margin-top: -7px;
}

</style>
